<template>
  <view class="ma mt30rpx w690rpx rounded-15rpx bg-white">
    <!-- 使用 u-cell-group 包裹列表项 -->
    <u-cell-group>
      <!-- 头像 -->
      <u-cell
        title="头像"
        is-link
      >
        <template #right-icon>
          <view class="flex items-center">
            <u-avatar
              :src="`${$url}${userInfo.avatar} `"
              size="70rpx"
              class="mr20rpx"
              @click="changeAvatar"
            />
            <!-- <u-icon name="arrow-right" color="#909399" size="28" /> -->
          </view>
        </template>
      </u-cell>

      <!-- 昵称 -->
      <u-cell
        title="昵称"
        :value="userInfo.userName"
        is-link
        @click="openPopup('userName')"
      />

      <!-- 性别 -->
      <u-cell
        title="性别"
        :value="userInfo.sex === '1' ? '男' : '女'"
        is-link
        @click="selectGender"
      />

      <!-- 微信 -->
      <u-cell
        title="微信"
        :value="userInfo.openId ? '已绑定' : '未绑定'"
        is-link
        @click="toBindWechat"
      />

      <!-- 邮箱 -->
      <u-cell
        title="邮箱"
        :value="userInfo.email"
        is-link
        @click="openPopup('email')"
      />

      <!-- 手机号 -->
      <u-cell
        title="手机号"
        :value="userInfo.phoneNumber"
        is-link
        @click="openPopup('phone')"
      />

      <!-- 学号 -->
      <u-cell
        title="学号"
        :value="userInfo.stuCode"
      />
    </u-cell-group>
    <u-popup
      :show="show"
      mode="center"
      class="h350rpx w690rpx rounded-10rpx"
      :closeable="true"
      @close="show = false"
    >
      <view class="ma mt85rpx h85rpx w650rpx pl20rpx pr20rpx">
        <u-input v-if="inputType === 'phone'" v-model="userInfo.phoneNumber" maxlength="11" placeholder="请输入手机号" />
        <u-input v-if="inputType === 'userName'" v-model="userInfo.userName" placeholder="请输入昵称" />
        <u-input v-if="inputType === 'email'" v-model="userInfo.email" placeholder="请输入邮箱" />
      </view>
      <view class="ma mt25rpx w650rpx pl20rpx pr20rpx">
        <u-button
          type="primary"
          shape="square"
          text="修改"
          @click="modify"
        />
      </view>
    </u-popup>
  </view>
</template>

<script setup lang="ts" name="user-info">
import { computed } from 'vue';
import { useUserStore } from '@/store';
import { $url, UserApi } from '@/api';
import type { UserInfo } from '@/api/user/type';
import { uploadAvatar } from '@/hooks/use-upload';

// 个人信息持久化
const userStore = useUserStore();
userStore.getUserInfo();
const userInfo = computed<UserInfo>(() => {
  return userStore.userInfo || {} as UserInfo;
});

// 是否显示弹窗
const show = ref(false);
// 弹窗输入框类型
const inputType = ref('');

// 头像上传
const changeAvatar = () => {
  uploadAvatar().then((res: any) => {
    userInfo.value.avatar = res.fileName;
    UserApi.updateUserInfo(userInfo.value).then(() => {
      uni.showToast({
        title: '修改成功',
      });
    });
  });
};

// 选择性别
const selectGender = () => {
  uni.showActionSheet({
    itemList: ['男', '女'],
    success: (res) => {
      userInfo.value.sex = res.tapIndex === 1 ? '0' : '1';
      console.log(userInfo.value.sex);

      UserApi.updateUserInfo(userInfo.value).then(() => {
        uni.showToast({
          title: '修改成功',
        });
      });
    },
  });
};

// 绑定微信
const toBindWechat = () => {
  uni.navigateTo({
    url: '/subPages/user/bindWeChat',
  });
};

// 打开弹窗
const openPopup = (type: string) => {
  inputType.value = type;
  show.value = true;
};

// 修改个人信息
const modify = () => {
  if (userInfo.value.phoneNumber === '' && userInfo.value.userName === '' && userInfo.value.email === '') {
    uni.showToast({
      title: '请不要提交空信息',
    });
    return;
  }
  if (userInfo.value.phoneNumber.length !== 11) {
    uni.showToast({
      title: '手机号格式不正确',
    });
    return;
  }
  UserApi.updateUserInfo(userInfo.value).then(() => {
    uni.showToast({
      title: '修改成功',
    });
    show.value = false;
  });
};
</script>

<style lang="scss" scoped>
:deep(.u-cell) {
  /* 自定义单元格样式 */
  .u-cell__title {
    color: #333;
    font-size: 28rpx;
  }

  .u-cell__value {
    color: #666;
    font-size: 28rpx;
  }
}

:deep(.u-avatar) {
  /* 自定义头像样式 */
  border: 1rpx solid #eee;
}
</style>
